<template>
	<div class="canvasBox">
		<canvas ref="canvas"></canvas>
	</div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import GameView from "@/paint/view/GameView";

@Component({
	name: "Game"
})
export default class GamePage extends Vue {
	private view: GameView | null = null;

	private get canvas(): HTMLCanvasElement {
		return this.$refs.canvas as HTMLCanvasElement;
	}

	private get id(): number {
		return (this.$route.params as any).id as number;
	}

	private mounted() {
		const view = (this.view = new GameView(this.canvas, this.id));
		view.AddOverEvent(() => {
			this.$router.push({ name: "Choose" });
		});
		view.Run();
	}

	private destroyed() {
		this.view && this.view.Stop();
	}
}
</script>

<style>
#canvas {
	width: 100%;
	height: 100%;
}
.mapString {
	width: 400px;
	height: 400px;
}
</style>
